import React, {PureComponent} from 'react';
import {connect} from 'dva';
import styles from './LoginPage.css';
import { Button, Row, Form, Icon, Input} from 'antd';
const FormItem = Form.Item;


class LoginPage extends PureComponent {
  // function OnDelete(index) {
  //   console.log(index);
  //   dispatch({
  //     type: "login/beforeDelete",
  //     payload: index
  //   })
  // }
  // let list = [];
  // login.todoList.forEach((item, index) => {
  //   let li = (<li key={index}>{item}<button onClick={() => OnDelete(index)}>删除</button></li>);
  //   list.push(li);
  // });
  render() {
    console.log(this.props);
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div id="login" className={styles.matCard}>
        <div className={styles.boxCardBody}>
          <div className="clear">
            <div className={styles.matCardAvatar}>
              <Icon type="user" className={styles.iconPerson}/>
            </div>
            <div className={styles.matCardHeaderText}>
              <div className={styles.matCardTitle}>你好！</div>
              <div className={styles.matCardSubtitle}>请登录……</div>
            </div>
            <form>
              <FormItem hasFeedback>
                {getFieldDecorator('username', {
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(
                  <Input
                    onPressEnter={this.handleOk}
                    // placeholder={i18n.t`Username`}
                  />
                )}
              </FormItem>
              <FormItem hasFeedback>
                {getFieldDecorator('password', {
                  rules: [
                    {
                      required: true,
                    },
                  ],
                })(
                  <Input
                    type="password"
                    onPressEnter={this.handleOk}
                    // placeholder={i18n.t`Password`}
                  />
                )}
              </FormItem>
              <Row>
                <Button
                  type="primary"
                  onClick={this.handleOk}
                  // loading={loading.effects.login}
                >
                  {/*<Trans>Sign in</Trans>*/}
                </Button>
                <p>
                <span>
                  {/*<Trans>Username</Trans>*/}
                  ：guest
                </span>
                  <span>
                  {/*<Trans>Password</Trans>*/}
                  ：guest
                </span>
                </p>
              </Row>
            </form>
          </div>
        </div>
      </div>
    )
  };
}

LoginPage.propTypes = {};

export default connect(({login}) => ({login}))(Form.create()(LoginPage));
